<template>
  <div class="user-card" :class="sideTheme">
    <div class="user-img">
      <img :src="haung" alt="" />
    </div>
    <div class="user-name">
      <span>荒</span>
    </div>
    <div class="user-description">
      <span>风吹哪页读哪页，花开何时看何时</span>
    </div>
    <div class="user-data">
      <div @click="hangleLink('CollectionWorks')">
        <span class="data-name">文章</span>
        <span class="data-value">{{ collectionWorks }}</span>
      </div>
      <div @click="hangleLink('Tags')">
        <span class="data-name">标签</span>
        <span class="data-value">{{ tags }}</span>
      </div>
      <div @click="hangleLink('StudyNotes')">
        <span class="data-name">笔记</span>
        <span class="data-value">{{ studyNotes }}</span>
      </div>
    </div>
    <div class="user-btn">
      <n-button
        type="info"
        :color="sideTheme == 'theme-dark' ? '#78787880' : null"
        @click="hangleLink('TouchFish')"
      >
        <template #icon>
          <n-icon>
            <fish />
          </n-icon>
        </template>
        摸鱼
      </n-button>
    </div>
    <div class="user-svg">
      <svg-icon class="icon" icon-class="csdn" />
      <svg-icon class="icon" icon-class="weixin" />
      <svg-icon class="icon" icon-class="QQ" />
      <svg-icon class="icon" icon-class="gitee_user" />
    </div>
  </div>
</template>

<script setup name="UserCard">
import haung from '@/assets/images/huang.jpg';
import { Fish } from '@vicons/fa';
import article from '@/mock/json/article.json';
import tag from '@/mock/json/tag.json';
import { useSettingsStore } from '@/store';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
const router = useRouter();

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const articleList = ref(article.list);
const tagList = ref(tag.list);
const collectionWorks = ref(0);
const tags = ref(0);
const studyNotes = ref(0);

const hangleLink = (name) => {
  router.push({ name });
};

const init = () => {
  tags.value = tagList.value.length;
  collectionWorks.value = articleList.value.filter(
    (J) => J.type == 'CollectionWorks',
  ).length;
  studyNotes.value = articleList.value.filter(
    (J) => J.type == 'StudyNotes',
  ).length;
};
onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.user-card {
  box-sizing: border-box;
  width: 100%;
  color: #4c4948;
  padding: 20px 24px;
  text-align: center;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  .user-img {
    & > img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
      transition: all 0.5s;
    }
  }
  .user-name {
    font-size: 24px;
  }
  .user-description {
    font-size: 14px;
  }
  .user-data {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin: 15px 0;
    .data-name {
      display: block;
    }
    .data-value {
      display: block;
      font-size: 21px;
      color: #1f2d3d;
    }
  }
}
.user-btn {
  width: 100%;
}
.user-svg {
  padding-top: 18px;
  & > .icon {
    margin: 0 10px;
    width: 16px;
    height: 16px;
  }
}
.user-img:hover {
  & > img {
    transform: rotate(360deg);
  }
}
::v-deep {
  .n-button {
    width: 100% !important;
  }
  .n-button:hover {
    cursor: url('../../assets/cur/x2.cur'), default !important;
  }
}

.theme-dark {
  background: rgba(0, 0, 0, 0.5) !important;
  span {
    color: #ffffffb3 !important;
  }
}
</style>
